<template>

  <div class="title">
    <div class="top"></div>
    <div class="bottom">
      <div class="left" @click="backFun">
        <img src="./back.png" alt="返回按钮">
        <div class="span">{{back}}</div>
      </div>
      <div class="middle">
        <div>{{title}}</div>
      </div>
      <div class="right">
        <div>{{right}}</div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: "Title",
    data() {
      return {}
    },
    props: {
      title: {
        type: String,
        default: '公积金11',
        require: true,
      },
      back:{
        type: String,
        default: '',
      },
      right:{
        type:String,
        default:''
      },
      rightImg:{
        type:String,
        default:''
      }
    },
    methods: {
      backFun() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .title
    background #0099FF;
    width 414px;
    height 64px;
    .top
      width 100%
      height 19px
    .bottom
      display inline-block
      height 44px
      margin-left 8px

      .left
        width: 92px
        height 44px
        display: flex;
        align-items center
        float left
        > img
          height 20px
          width: 20px
          vertical-align middle
        > div
          color white
          font-size 14px
          display none
      .middle
        height: 44px
        width: 214px
        float left
        display flex
        flex-direction column
        align-items center
        > div
          color white
          font-size 16px
          margin-top 12px
      .right
        width 100px
        height 44px
        display flex
        flex-direction column
        align-items flex-end
        > div
          color white
          font-size 16px
          margin-top 12px
          margin-right 10px
</style>
